<template>
  <div>
      <el-form :model="searchForm" inline label-width="80px">
        <el-form-item label="是否匿名">
          <el-select v-model="searchForm.anonymous" clearable placeholder="请选择">
            <el-option label="匿名" :value="1"/>
            <el-option label="实名" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="是否回复">
          <el-select v-model="searchForm.status" clearable placeholder="请选择">
            <el-option label="已回复" :value="2"/>
            <el-option label="未回复" :value="1"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDataList">搜索</el-button>
          <el-button @click="clearForm">清空</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" border>
        <el-table-column prop="id" label="编号" align="center"/>
        <el-table-column prop="userId" label="反馈人" align="center">
          <template slot-scope="scope">
            <el-tag type="warning" size="mini" v-if="scope.row.anonymous === 1">匿名</el-tag>
            <el-tag type="success" size="mini" v-else>{{scope.row.vip.name}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="反馈内容" show-overflow-tooltip />
        <el-table-column prop="createTime" label="反馈时间" show-overflow-tooltip />
        <el-table-column prop="reply" label="回复内容" show-overflow-tooltip />
        <el-table-column label="操作" align="center" width="160px">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.status === 2 || scope.row.anonymous === 1" size="mini" @click="openDialog(scope.row.id)">回复</el-button>
            <el-button size="mini" @click="deleteInfo(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <el-pagination hide-on-single-page :current-page="pageInfo.page" :page-size="pageInfo.limit" :page-sizes="[5,10,20,50,100]" @current-change="currentChange" @size-change="sizeChange" layout="total,sizes,prev,pager,next,jumper" :total="pageInfo.total"/>
    <el-dialog title="回复内容" :visible.sync="replyDia" v-if="replyDia">
      <el-input type="textarea" :rows="5" maxlength="200" show-word-limit placeholder="请输入回复内容" v-model="reply.reply"/>
      <template #footer>
        <el-button type="primary" @click="replyContent">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>

const initData = {
  anonymous: '',
  status: ''
}
export default {
  name: 'FeedbackList',
  data () {
    return {
      searchForm: {
        ...initData
      },
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0
      },
      dataList: [],
      replyDia: false,
      reply: {
        id: '',
        reply: ''
      }
    }
  },
  methods: {
    getDataList () {
      this.$http.get('feedback/page', { ...this.searchForm, ...this.pageInfo }).then(data => {
        if (data) {
          this.dataList = [...data.records]
          this.pageInfo.total = data.total
        }
      }).catch(() => {})
    },
    currentChange (page) {
      this.pageInfo.page = page
      this.getDataList()
    },
    sizeChange (limit) {
      this.pageInfo.limit = limit
      this.getDataList()
    },
    clearForm () {
      this.searchForm = { ...initData }
      this.pageInfo = {
        page: 1,
        limit: 5,
        total: 0
      }
      this.getDataList()
    },
    deleteInfo (id) {
      this.$confirm(`确定删除编号<span style="font-weight: bold;color: #66b1ff">[${id}]</span>的数据吗?`, '询问', { dangerouslyUseHTMLString: true }).then(() => {
        this.$http.delete(`feedback/delete/${id}`).then(() => {
          this.$message.success('删除成功！')
          this.getDataList()
        }).catch(() => {})
      }).catch(() => {})
    },
    openDialog (id) {
      this.replyDia = true
      this.reply.id = id
    },
    replyContent () {
      if (!this.reply.reply) {
        this.$message.error('请输入回复内容！')
        return false
      }
      this.reply.status = 2
      this.$http.post('feedback/reply', this.reply).then(() => {
        this.$message.success('回复成功！')
        this.reply.id = ''
        this.reply.reply = ''
        this.replyDia = false
        this.getDataList()
      }).catch(() => {})
    }
  },
  created () {
    this.getDataList()
  }
}
</script>

<style scoped>

</style>
